<template>
  <a-drawer
    placement="right"
    :closable="false"
    :visible="detailVisible"
    height="100%"
    width="75%"
    wrapClassName="add-power"
    @close="closeTopDrawer"
    :destroyOnClose="true"
    :headerStyle="{
      background: '#fff',
      padding: '0.2rem 0.25rem 0.2rem 0.25rem',
      flexGrow: 0,
    }"
    :bodyStyle="{
      padding: '0.2rem',
      background: 'fff',
      flexGrow: 1,
      overflowY: 'auto',
    }"
    :drawerStyle="{
      background: '#EEEEEF',
      display: 'flex',
      flexDirection: 'column',
    }"
  >
    <template #title>
      <div class="head-box">
        <div class="name-box">
          <span>{{ detailData.title }}</span>
          <div class="operation-right">
            <a-icon type="edit" title="编辑" class="mr_16" @click="edit" />
            <a-icon
              type="delete"
              title="删除"
              class="mr_16"
              @click="deleteMaintenance"
            />
            <a-icon
              type="sync"
              title="刷新"
              class="mr_16"
              @click="getMaintenanceDetail"
            />
            <div class="close-box" @click="closeTopDrawer">
              <a-icon type="close" class="close-icon" />
            </div>
          </div>
        </div>
        <div class="status-box">
          <div class="detail-one" v-for="item in maintenanceMsg">
            <div class="detail-title">{{ item.label }}</div>
            <div class="detail-msg">{{ item.value }}</div>
          </div>
        </div>
      </div>
    </template>
    <div class="content-box">
      <div class="maintenance-content">
        <div class="ctn-title">维保内容</div>
        <div class="ctn-msg">
          {{ detailData.maintenanceDesc }}
        </div>
      </div>
      <div class="remark-box">
        <div class="ctn-title">备注</div>
        <div class="ctn-msg">{{ detailData.remark }}</div>
      </div>
    </div>
  </a-drawer>
</template>
<script>
import { maintenanceDetail } from "@/api/maintenance.js";
export default {
  data() {
    return {
      maintenanceName: "",
      maintenanceMsg: [
        {
          value: "--",
          label: "维保人:",
          prop: "maintenanceUser",
        },
        {
          value: "--",
          label: "维保时间: ",
          prop: "maintenanceTime",
        },
        {
          value: "--",
          label: "维保系统类型:",
          prop: "maintenanceType",
        },
        {
          value: "--",
          label: "维保系统:",
          prop: "stationId",
        },
        {
          value: "--",
          label: "设备对象类型:",
          prop: "maintenanceObject",
        },
        {
          value: "--",
          label: "维保对象:",
        },
        {
          value: "--",
          label: "更新时间:",
          prop: "changeTime",
        },
        {
          value: "--",
          label: "管理者:",
          prop: "adminUser",
        },
        {
          value: "--",
          label: "创建时间:",
          prop: "createTime",
        },
      ],
      detailData: {},
    };
  },
  props: {
    detailVisible: {
      type: Boolean,
      default: false,
    },
    id: String,
  },
  watch: {
    detailVisible(newv) {
      if (newv) {
        this.getMaintenanceDetail();
      }
    },
  },
  methods: {
    closeTopDrawer() {
      this.$emit("update:detailVisible", false);
    },
    getMaintenanceDetail() {
      maintenanceDetail({ id: this.id }).then((res) => {
        // res.data.forEach(item=>{
        //   item.maintenanceUser=item.
        // });
        res.data.maintenanceUser = res.data.userEntities
          .map((item) => {
            return item.name;
          })
          .join(",");
        res.data.maintenanceType =
          res.data.maintenanceType == 1 ? "电站" : "--";
        res.data.maintenanceObject =
          res.data.maintenanceObject == 1 ? "设备" : "其他";
        this.maintenanceMsg.forEach((item) => {
          for (let k in res.data) {
            if (k == item.prop) {
              item.value = res.data[k];
            }
          }
        });
        this.detailData = res.data;
        console.log(res);
      });
    },
    deleteMaintenance() {
      this.$emit("deleteMaintenance", this.detailData);
    },
    edit() {
      this.$emit("editMaintenance", this.detailData);
    },
  },
};
</script>
<style lang="less" scoped>
.add-power {
  .head-box {
    .name-box {
      display: flex;
      justify-content: space-between;
      .task-code {
        color: #95929c;
        font-size: 12px;
      }
      span {
        font-size: 18px;
        color: #252b3a;
      }
      .operation-right {
        display: flex;
        align-items: center;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.45);
        .mr_16 {
          margin-right: 16px;
          transition: all 0.5s;
          cursor: pointer;
          &:hover {
            color: #048fff;
          }
        }
        .close-box {
          background: #ff7875;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 28px;
          height: 28px;
          font-size: 16px;
          color: #fff;
          border-radius: 50%;
          &:hover {
            i {
              transform: rotate(90deg);
            }
          }
          i {
            transition: all 0.3s;
          }
        }
      }
    }
    .status-box {
      display: grid;

      margin-top: 16px;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      //   grid-template-rows: 40px 40px 40px;
      grid-gap: 16px;
      .detail-one {
        font-size: 12px;
        .detail-title {
          color: #00000073;
          line-height: normal;
        }
        .detail-msg {
          color: #000000a6;
          margin-top: 4px;
          line-height: normal;
        }
      }
    }
  }
  .content-box {
    width: 100%;
    height: 100%;
    .ctn-title {
      font-size: 14px;
      color: #252b3a;
      margin-bottom: 16px;
    }
    .ctn-msg {
      font-size: 12px;
      color: #515561;
    }
    .maintenance-content {
      min-height: 152px;
      padding: 16px;
      margin-bottom: 16px;
      background: #fff;
      border: 1px solid rgba(37, 43, 58, 0.1);
      border-radius: 4px;
    }
    .remark-box {
      min-height: 152px;
      padding: 16px;
      background: #fff;
      border: 1px solid rgba(37, 43, 58, 0.1);
      border-radius: 4px;
    }
  }
}
</style>